<script setup>
import Header from '@/components/header/Header.vue'
import TypeCard from './components/TypeCard.vue'
import Business from './components/Business.vue'
import Detail from './components/Detail.vue'
import ActionBar from './components/ActionBar.vue'
import BookPopup from '@/components/book-popup/BookPopup.vue'
import { nextTick, ref } from "vue"
import api from "@/api/index.js"
import { useRoute } from 'vue-router'

const IMAGEURL = 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'

const contentHeight = ref('100vh')
const getContentHeight = () => {
  let divElement = document.getElementById("content")
  const distanceToTop = divElement.getBoundingClientRect().top
  contentHeight.value = window.innerHeight - distanceToTop + 'px'
}

const route = useRoute()
const imageLoad = () => {
  nextTick(() => {
    getContentHeight()
  })
}

const getDetailInfo = () => {
  //   loading.value = true
  const params = {
    id: route.query.shopId
  }
  api.getDetailInfo(params).then((res) => {

    console.log('景点详细', res)

  }).finally(() => {

  })
}
getDetailInfo()

const showPopup = ref(false)
const openBookPopup = () => {
  showPopup.value = true
}
const closePopup = () => {
  showPopup.value = false
}
</script>

<template>
  <div>
    <Header title="商品详情" :back="true" />
    <van-image
      @load="imageLoad"
      class="image"
      lazy-load
      width="100vw"
      fit="contain"
      :src="IMAGEURL"
    />
    <div class="content" id="content" :style="{height: contentHeight}">
      <div class="price_box">
        <div class="icon">￥</div>
        <div class="price">80</div>
        <div class="qi">起</div>
        <div class="price-">
          ￥90
        </div>
      </div>
      <h2 class="name">
        成都青城山景区-大门票-全景区通票
      </h2>
      <div class="guarantee">
        <div class="guarantee_content">
          <div class="guarantee_content_title">保障服务</div>
          <div class="guarantee_content_text">
            <div class="text">出票保障·使用保障</div>
            <img class="doubt" src="@/assets/images/icons/doubt.jpg" alt="">
          </div>
        </div>
        <img class="guarantee_bg" src="@/assets/images/index/guarantee_bg.jpg" alt="">
      </div>
      <div class="commodity">
        <div class="header">
          大门票
        </div>
        <div class="line"></div>
      </div>
      <TypeCard @openBookPopup="openBookPopup"/>
      <Business />
      <Detail />
      <div style="height: 6rem"></div>
      <div style="height: 5.8rem"></div>
    </div>
    <ActionBar class="action_bar" />
    <BookPopup :showPopup="showPopup" @closePopup="closePopup" />
  </div>
</template>

<style scoped lang="scss">
.image{
  z-index: -1;
}
.content{
  overflow-y: auto;
  height: 10vh;
  margin-top: -3rem;
  border-top-left-radius: 3rem;
  border-top-right-radius: 3rem;
  background: linear-gradient(180deg, #FFFFFF 0%, #F9F8F3 31%);
  padding: 3rem 2rem;
  .price_box{
    height: 3.9rem;
    display: flex;
    align-items: baseline;
    color: #ED6316;
    .icon{
      font-size: 1.7rem;
    }
    .price{
      font-size: 2.8rem;
      padding: 0 .2rem;
    }
    .qi{
      font-size: 1.6rem;
    }
    .price-{
      margin-left: .5rem;
      font-size: 1.6rem;
      color: #999999;
      text-decoration: line-through;
    }
  }
  .name{
    font-size: 1.6rem;
    font-weight: bold;
    color: #333333;
    line-height: 19px;
  }
  .guarantee{
    position: relative;
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
    height: 4rem;
    .guarantee_content{
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 0 1rem;
      z-index: 1;
      .guarantee_content_title{
        font-size: 1.4rem;
        font-weight: normal;
        color: #FFFFFF;
      }
      .guarantee_content_text{
        display: flex;
        align-items: center;
        font-size: 1.4rem;
        color: #333333;
        .doubt{
          margin-left: .8rem;
        }
      }
    }
    .guarantee_bg{
      position: absolute;
      top: 0;
      left: 0;
      //z-index: -1;
      width: 100%;
      height: 100%;
    }
  }
  .commodity{
    .header{
      font-size: 1.8rem;
      font-weight: bold;
      color: #333333;
    }
    .line{
      position: relative;
      top: -0.2rem;
      width: 3rem;
      height: .6rem;
      background: linear-gradient(90deg, #4FAC91 0%, #ECE3AA 83%);
      border-radius: .3rem;
      opacity: 1;
    }
  }
}
.action_bar{
  position: fixed;
  z-index: 99;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5.8rem;
}
</style>